<template>
	<view class="app">
		<view class="panel">
			<view class="flex-col setpidpage">
				<view class="flex justify-between inputitem">
					<view>账号</view>
					<view><input v-model="account" placeholder="请输入收款人支付宝账号" /></view>
				</view>
				<view class="flex justify-between inputitem">
					<view>姓名</view>
					<view>
						<input v-model="realname" placeholder="请输入收款人姓名" />
					</view>
				</view>
				<view class="flex justify-between inputitem">
					<view>金额</view>
					<view>
						<input v-model="amount" placeholder="请输入付款金额" />
					</view>
				</view>
				<view class="flex justify-center items-center btn-save">
					<button @tap.stop="toPay">立即支付</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that,App=getApp(),Comm=getApp().comm;
	export default {
		data() {
			return {
				account:'',
				realname:'',
				amount:'',
			}
		},
		onLoad() {
			that=this;
		},
		methods: {
			toPay(){
				if(!/(^1([3-9]\d{9})$)|([\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,})/.test(this.account)){
					uni.showToast({icon:'none',title:'支付宝账号有误'});
					return;
				}
				if(!/[\u4e00-\u9fff]+/u.test(this.realname)){
					uni.showToast({icon:'none',title:'收款人姓名有误'});
					return;
				}
				if(!/^\d+(\.\d{1,2})?$/.test(this.amount)){
					uni.showToast({icon:'none',title:'付款金额有误'});
					return;
				}
				uni.showModal({
					content:'确认付款？',
					success(e) {
						if(e.confirm){
							that.comm.http('/api/tool/alipay',{
								account:that.account,realname:that.realname,amount:that.amount
							},'POST').then(res=>{
								uni.showToast({icon:'none',title:res.msg});
								if(res.code==1){
									that.account='';
									that.realname='';
									that.amount='';
								}
							});
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.setpidpage{
		.inputitem{
			align-items: center;
			view:nth-child(2){
				flex: 1;margin-left: 8px;
				input{
					height:40px; width: 100%; border-bottom: 1px solid #f0f0f0; font-size: 13px;
				}
			}

		}
		.tips{
			font-size: 12px; color: #999; padding: 8px 0; display: block;
		}
	}
</style>